import { defineComponent, ref, computed, watch } from 'vue'

import { Table as ElTable } from 'element-ui'
import NoDataEmpty from '@src/component/common/NoDataViewNew/NoDataViewNew.vue'
import IntellResultDialog from '@src/modules/intelligentQuality/views/details/components/intellResultDialog/index.tsx'
/* utils */
import { t as $t } from '@src/locales';
import { openAccurateTab } from '@src/util/platform';
import dayjs from 'dayjs'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

import './index.scss'

export default defineComponent({
    name: 'TableData',
    props: {
        tableOptions: {
            type: Object,
            default: () => ({})
        },
        tableData: {
            type: Array,
            default: () => ([])
        },
        loadingTable: {
            type: Boolean,
            default: false
        }
    },
    emits: ['currentPageChange'],
    setup(props, { emit }) {
        const tableRef = ref<InstanceType<typeof ElTable>>()
        const resultDialogRef = ref<InstanceType<typeof IntellResultDialog> | null>(null)
        const tableOptions = computed(() => {
            return props.tableOptions || {}
        })
        const loading = computed(() => {
            return props.loadingTable
        })
        // 表格数据
        const tableData = computed(() => {
            return props.tableData || []
        })

        const currentChangeHandler = (val: number) => {
            emit('currentPageChange', val)
        }

        const sizeChangeHandler = (val: number) => {
        }

        const openResultDialog = (row: any) => {
            resultDialogRef.value?.open({
                sim: row.sim,
                pass: row.pass,
                pictureUrl: row.pictureUrl,
                lastLikePictureUrl: row.lastLikePictureUrl
            })
        }
        
        const openTaskTab = (row: any) => {
            const taskId = row.bizId

            let fromId = window.frameElement.getAttribute('id')
            openAccurateTab({
                type: PageRoutesTypeEnum.PageTaskView,
                key: taskId,
                params: 'noHistory=1',
                fromId
              })
        }

        // 自定义表格工单编号列渲染
        const renderCustomHeader = (row: any) => {
            return (
                <div class="qu-td-custom-task-header">
                    <span class="qu_iconText">工单编号</span>
                    <el-tooltip
                      effect="dark"
                      content={'开启实时质检可能会出现未创建的工单'}
                      placement="top"
                    >
                      <i class="iconfont icon-question-circle qu_iconTask"></i>
                    </el-tooltip>
                </div>
            )
        }

        return {
            loading,
            tableOptions,
            tableData,
            tableRef,
            resultDialogRef,
            openResultDialog,
            currentChangeHandler,
            sizeChangeHandler,
            openTaskTab,
            renderCustomHeader
        }
    },
    render() {
        return (
            <div class="qu-td">
                <div class="qu-td-header">
                    <div class="qu-td-header-title">
                        数据明细
                    </div>
                    {/* <div class="qu-td-header-select">
                        <span>{$t('common.base.choiceCol')}</span>
                        <i class="iconfont icon-fdn-select"></i>
                    </div> */}
                </div>
                <div class="qu-td-content" v-loading={this.loading}>
                    <el-table
                        data={this.tableData}
                        ref={el => this.tableRef = el}
                        header-cell-class-name="qu-td-header-row"
                        scopedSlots={{
                            empty: () => {
                                return (
                                    <NoDataEmpty />
                                )
                            }
                        }}
                    >
                        <el-table-column
                            prop="bizNo"
                            label="工单编号"
                            scopedSlots={{
                                default: ({ row }) => {
                                    return (
                                        <div class="qu-td-custom-task">
                                            {
                                                row.bizNo ? (
                                                    <a class="qu-td-biz" onClick={(e) => {
                                                        e.stopPropagation()
                                                        e.preventDefault()
                                                        this.openTaskTab(row)
                                                    }}>
                                                        {row.bizNo}
                                                    </a>
                                                ) : (
                                                    <span class="qu-td-no">
                                                        <i class="iconfont warning-circle-fill">&#xe6d3;</i>
                                                        <data>工单未创建</data>
                                                    </span>
                                                )
                                            }
                                            
                                        </div>
                                    )
                                },
                                header: ({ row }) => {
                                    return this.renderCustomHeader(row)
                                }
                            }} 
                        >
                        </el-table-column>
                        <el-table-column
                            prop="submitUser"
                            label="提交人"
                            scopedSlots={{
                                default: ({ row }) => {
                                    return (
                                        <div>
                                            <span>{row.submitUser?.displayName || ''}</span>
                                        </div>
                                    )
                                }
                            }}
                        >
                        </el-table-column>
                        {
                            this.tableData && this.tableData.length > 0 ? (
                                <el-table-column
                                    prop="lastLikePictureUrl"
                                    label={this.tableData[0]?.bizFieldName || ''}
                                    scopedSlots={{
                                        default: ({ row }) => {
                                            return (
                                                <div class="qu-td-img table-blacklist">
                                                    <img src={row.pictureUrl} onClick={() => this.openResultDialog(row)} />
                                                </div>
                                            )
                                        }
                                    }}
                                >
                                </el-table-column>
                            ) : null
                        }
                        
                        <el-table-column
                            prop="checkTime"
                            label="检测时间"
                            scopedSlots={{
                                default: ({ row }) => {
                                    let checkTime = row.checkTime
                                    checkTime ? (checkTime = dayjs(checkTime).format('YYYY-MM-DD HH:mm:ss')) : ''
                                    return (
                                        <span>{ checkTime }</span>
                                    )
                                }
                            }}
                        >

                        </el-table-column>
                    </el-table>
                    <div class={'qu-table-pagination'}>
                        <div class="qu-table-pagination-total">
                            共&nbsp;<span>{this.tableOptions.total}</span>&nbsp;条
                        </div>
                        <el-pagination class="table-pagination"
                            background
                            layout={'prev, pager, next, total'}
                            total={this.tableOptions.total}
                            pageSize={this.tableOptions.pageSize}
                            currentPage={this.tableOptions.pageNum}
                            onCurrent-change={val => this.currentChangeHandler(val)}
                            onSize-change={val => this.sizeChangeHandler(val)}></el-pagination>
                    </div>
                </div>
                <IntellResultDialog ref={(el) => this.resultDialogRef = el} />
            </div>
        )
    }
})